<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            margin: 100px auto;
            position: relative;
            height: 200px;

        }

        .item {
            width: 10px;
            height: 100px;
            background-color: red;
            margin: 20px;
            position: absolute;
        }

        .item:nth-child(1) {
            left: 0;
        }

        .item:nth-child(2) {
            left: 100px;
        }

        .item:nth-child(3) {
            left: 200px;
        }

        .item:nth-child(4) {
            left: 300px;
        }

        .item:nth-child(odd) {
            top: 40px;
            animation: moveBottom 3s;
            animation-iteration-count: infinite;
        }

        .item:nth-child(even) {
            top: -40px;
            animation: moveTop 3s;
            animation-iteration-count: infinite;
        }

        @keyframes moveTop {
            0% {
                top: -40px
            }

            50% {
                top: 0
            }

            100% {
                top: -40px
            }

        }

        @keyframes moveBottom {
            0% {
                top: 40px;

            }

            50% {
                top: 0
            }

            100% {
                top: 40px
            }
        }

        @keyframes mymove {
            from {
                left: 0px;
            }

            to {
                left: 70px;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item "></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <canvas id="canvas"></canvas>
</body>
<script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let radians = (Math.PI / 180) * 180;
    let startTime = Date.now();
    let time = 2000;
    let clockwise = 1;
    let cp1x, cp1y, cp2x, cp2y;

    // 初始状态
    // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // 末尾状态
    // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);
    function waveDraw() {
        let t = Math.min(1.0, (Date.now() - startTime) / time);

        if (clockwise) {
            cp1x = 90 + (55 * t);
            cp1y = 28 + (72 * t);
            cp2x = 92 - (51 * t);
            cp2y = 179 - (79 * t);
        } else {
            cp1x = 145 - (55 * t);
            cp1y = 100 - (72 * t);
            cp2x = 41 + (51 * t);
            cp2y = 100 + (79 * t);
        }

        ctx.clearRect(0, 0, 200, 200);
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 绘制圆弧
        ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.save();

        if (t == 1) {
            startTime = Date.now();
            clockwise = !clockwise;
        }
    }
    waveDraw()
    fetch('https://qa-oms.longxins.com/api/oms/fetch-config-data?fetch_name=language_obj_s').then(
        res => {
            console.log(res)
        }
    )
</script>

</html>